import { Layout, Input, Popconfirm } from 'antd'
import { Link, useNavigate } from 'react-router-dom';
import { LogoutOutlined, UserOutlined } from '@ant-design/icons';
import { useSelector } from 'react-redux'
import './index.scss'
import { UploadOutlined } from '@ant-design/icons';
import {
    Button,
    Form,
    Radio,
    Select,
    Upload,
    DatePicker,
    Space

} from 'antd';

const { Header } = Layout
const { Search } = Input;
const onSearch = (value, _e, info) => console.log(info?.source, value);
const MainHeader = () => {
    const navigate = useNavigate()
    const personalinfo = () => {
        // console.log('点击了个人信息')
        navigate('/person')
    }
    //退出登录确认回调
    const onConfirm = () => {
        // console.log('确认')

        navigate('/login')
    }
    const name = useSelector(state => state.user.userInfo.tokenName)

    const config = {
        rules: [
            {
                type: 'object',
                required: true,
                message: 'Please select time!',
            },
        ],
    };

    const { Option } = Select;
    const formItemLayout = {
        labelCol: {
            span: 6,
        },
        wrapperCol: {
            span: 14,
        },
    };
    const normFile = (e) => {
        console.log('Upload event:', e);
        if (Array.isArray(e)) {
            return e;
        }
        return e?.fileList;
    };
    const onFinish = (values) => {
        console.log('Received values of form: ', values);
    };


    return <div>
        <Layout>
            <Header className="header">
                <div className="logo" />
                <div className="user-info">
                    <Link to="/home" className='user-name'>主页</Link>
                    <Link to="/article" className='user-name'>刷八股</Link>
                    <Link to="/publish" className='user-name'>刷OJ</Link>
                    <Link to="/about" className='user-name'>关于我们</Link>


                    <Search
                        placeholder="输入搜索关键词"
                        allowClear
                        onSearch={onSearch}
                        style={{
                            marginTop: 18,
                            width: 200,
                            marginRight: 20
                        }}
                    />
                    <span className="user-name" onClick={personalinfo}><UserOutlined />{name}</span>
                    <span className="user-logout">
                        <Popconfirm title="是否确认退出?" okText="退出" cancelText="取消" onConfirm={onConfirm}>
                            <LogoutOutlined /> 退出
                        </Popconfirm>
                    </span>
                </div>
            </Header>
        </Layout>

        <div className='mainbox'>
            <div className='modifyheader'>修改信息</div>
            <div className='modifybody'>
                <Form
                    name="validate_other"
                    {...formItemLayout}
                    onFinish={onFinish}

                    style={{
                        maxWidth: 600,
                    }}
                >
                    <Form.Item
                        label="昵称"
                        name="Input"
                      
                        rules={[
                            {
                                required: true,
                                message: 'Please input!',
                    
                                  
                            },
                        ]}
                    >
                        <Input  placeholder="这里输入昵称"/>
                    </Form.Item>
                    <Form.Item name="radio-group" label="性别">
                        <Radio.Group>
                            <Radio value="a">男</Radio>
                            <Radio value="b">女</Radio>

                        </Radio.Group>
                    </Form.Item>

                    <Form.Item
                        name="bio"
                        label="简介"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input.TextArea rows={2} />
                    </Form.Item>

                    <Form.Item
                        name="upload"
                        label="头像"
                        valuePropName="fileList"
                        getValueFromEvent={normFile}

                    >
                        <Upload name="logo" action="/upload.do" listType="picture">
                            <Button icon={<UploadOutlined />}>Click to upload</Button>
                        </Upload>
                    </Form.Item>

                    <Form.Item name="date-time-picker" label="创建时间" {...config}>
                        <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
                    </Form.Item>

                    <Form.Item
                        wrapperCol={{
                            span: 12,
                            offset: 6,
                        }}
                    >
                        <Space>
                            <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                            <Button htmlType="reset">reset</Button>
                        </Space>
                    </Form.Item>
                </Form>

            </div>

        </div>

    </div>




}
export default MainHeader
